import React from 'react';
import {Button} from 'antd';
import { WeaDialog, WeaTransfer, WeaInputSearch } from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

// 流程中心，数据来源，显示字段,穿梭框
class EField_New extends React.Component {
    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.state = {
            title: props.title,
            visible: true, 
            eFieldNewDataSource: props.eFieldNewDataSource || [],
            eFieldNewUsedKeys: props.eFieldNewUsedKeys || [],
        };
    }

    onLeftSearch = (value) => {this.setState({leftSearchName: value})};
    onRightSearch = (value) => {this.setState({rightSearchName: value})};

    onChange = (keys) => {this.setState({eFieldNewUsedKeys: keys})};
    
    render() {
        const {visible, eFieldNewDataSource, eFieldNewUsedKeys, searchName, title} = this.state;
        
        
    let leftHeader = (
      <div style={{display: 'inline-block', position: 'relative'}}>
        <span style={{
          paddingLeft: '15px', position: 'absolute',
          width: '100px', textAlign: 'left', whiteSpace: 'nowrap',
          overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', top: '-25px'
        }}
        >
            {getLabel(83302, '待选')}
        </span>
        <div style={{position: 'absolute', top: '-27px',  width: '110px', left: '238px'}}>
          <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@1obrft`} onSearch={this.onLeftSearch}/>
        </div>
      </div>
    );
    let rightHeader = (
      <div style={{display: 'inline-block', position: 'relative'}}>
        <span style={{
          paddingLeft: '15px', position: 'absolute',
          width: '100px', textAlign: 'left', whiteSpace: 'nowrap', 
          overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', top: '-25px'}}>
            {getLabel(83303, '已选')}
        </span>
        <div style={{position: 'absolute',top: '-27px',  width: '110px', left: '238px'}}>
          <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@t5z43p`} onSearch={this.onRightSearch}/>
        </div>
      </div>
    )
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@cythy3`}
                visible={visible}
                title={title}
                icon={'icon-coms-workflow'}
                iconBgcolor={'rgb(0, 121, 222)'}
                style={{width: 792}}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@4qiny4`}
                    className="wf-center-element-showfieldnew"
                    data={eFieldNewDataSource}
                    selectedKeys={eFieldNewUsedKeys}
                    onChange={this.onChange}
                    leftHeader={leftHeader}
                    rightHeader={rightHeader}
                    filterLeft={this.filterLeft.bind(this, eFieldNewDataSource)}
                    filterRight={this.filterRight.bind(this, eFieldNewUsedKeys)}
                    style={{padding: '10px'}}
                />
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fuuocj@sure`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@k9uzei@cancel`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onOk() {
        this.props.onOk(this.state);
    }

    onCancel() {
        this.props.onCancel();
    }
    filterLeft = (items) => {
      const { leftSearchName } = this.state;
      if (leftSearchName) {
          items = items.filter((item)=>item.name.indexOf(leftSearchName.trim()) != -1);
      }
      return items;
  }
  
    filterRight = (items) => {
        const { rightSearchName, eFieldNewDataSource } = this.state;
        let itemss = [];
        for(let i = 0; i< items.length; i++){
            for(let j = 0; j < eFieldNewDataSource.length; j++){
                if(items[i] == eFieldNewDataSource[j].key){
                    itemss.push(eFieldNewDataSource[j]);
                    continue;
                }
            }
        }
        if (rightSearchName) {
            itemss = itemss.filter((item)=>item.name.indexOf(rightSearchName.trim()) != -1);
        }
        return itemss;
    }
}

export default EField_New;
